<template>
	<view>
		<view class="index-header relative">
			<image class="block index-header-bg absolute" src="https://mall-admin.xinjiafu.net/mini-static/images/0.png" />
			<image class="block city absolute" src="https://mall-admin.xinjiafu.net/mini-static/images/1.png" />
			<view class="navBarGap"></view>
			<u-gap height="60rpx"></u-gap>
			<!-- 	<view class="search relative zi2 flex align-item_center">
				<view class="weather">
					14—24
					<image class="c " src="https://mall-admin.xinjiafu.net/mini-static/images/12.png" />
					<image class="t " src="https://mall-admin.xinjiafu.net/mini-static/images/3.png" />
				</view>
				<view class="input flex align-item_center justify-content_center">
					<image class="s" src="https://mall-admin.xinjiafu.net/mini-static/images/4.png" />
					<view class="keyWrod">
						<up-input placeholder="请输入关键字搜索" border="none" v-model="keyWord"></up-input>
					</view>
				</view>
			</view> -->
			<view class="sub relative zi2 flex">
				<view class="line"></view>
				<view class="title">欣家服</view>
				<view class="ds">家庭综合服务</view>
			</view>
		</view>

		<view class="index-NoticeBar relative zi2">
			<up-notice-bar :text="noticeList" direction="column" mode="link" bgColor="#F2EBDD" color="#918A7F"
				@click="noticeDetials"> </up-notice-bar>
		</view>

		<u-gap height="20rpx"></u-gap>
		<view class="index-title pad0-21">主要功能</view>
		<u-gap height="18rpx"></u-gap>
		<view class="index-operation pad0-21 flex wrap justify-content_space-between">
			<view class="item flex align-item_center justify-content_space-between" v-for="(item,index) in operations"
				:key="index" @click="router(item)">
				<view class="title">{{item.title}}</view>
				<image :src="item.icon" :style="item.iconStyle" />
			</view>
		</view>

		<image class="block index-logo minLogo" src="https://mall-admin.xinjiafu.net/mini-static/images/11.png" />
		<u-gap height="52rpx"></u-gap>

		<tabbar :current="0" />
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		navigateTo,
		msg
	} from "@/utils/tool.js"
	import {
		operations
	} from "./index.js"
	import {
		onLoad,
	} from '@dcloudio/uni-app';
	import tabbar from "@/components/tabbar.vue"
	import noticeApi from "@/sheep/api/system/notice.js"
	import login from "@/common/login.js"


	const noticeDetials = index => {
		navigateTo(`/pages/announcement/details?id=${noticeData.value[index].id}`)
	}

	const keyWord = ref()
	const noticeList = ref([])
	const noticeData = ref()

	const router = async (item) => {
		if (!item.url) {
			if (item.title === '就业服务') return msg("就业服务电话：15961312620");
			return msg();
		}
		login().then(() => {
			navigateTo(item.url)
		})
	}

	onLoad(() => {
		// 公告
		noticeApi.page({
			pageNo: 1,
			pageSize: 10
		}).then(res => {
			if (res.code === 0) {
				noticeData.value = res.data.list;
				noticeList.value = res.data.list.map(item => item.title);
			}
		})
	})
</script>

<style>
	page {
		background: #F8F3E9;
	}
</style>
<style lang="scss" scoped>
	.index-logo {
		margin: 98rpx auto 0;
	}

	.index-operation {
		.item {
			margin-top: 20rpx;
			width: 324rpx;
			height: 164rpx;
			opacity: 1;
			border-radius: 8rpx;
			background: #EFE5D0;

			.title {
				padding-left: 36rpx;
			}
		}
	}

	.index-title {
		font-size: 36rpx;
		font-weight: 500;
		letter-spacing: 0rpx;
		line-height: 52.12rpx;
		color: rgba(64, 3, 3, 1);
	}

	.index-NoticeBar {
		width: 750rpx;
		height: 72rpx;
		opacity: 1;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		background: rgba(242, 235, 221, 1);
		overflow: hidden;
	}

	.index-header {
		width: 100%;
		height: 540rpx;

		.sub {
			padding: 40rpx 0 0 41rpx * 2;

			.ds {
				font-size: 32rpx;
				font-weight: 400;
				letter-spacing: 14rpx;
				line-height: 45.98rpx;
				color: rgba(255, 255, 255, 1);
				margin-left: 7rpx * 2;
				writing-mode: vertical-rl;
				margin-top: 14rpx;
			}

			.title {
				font-size: 48rpx;
				font-weight: 700;
				letter-spacing: 34rpx;
				line-height: 68.98rpx;
				color: rgba(255, 255, 255, 1);
				margin-left: 14rpx * 2;
				margin-top: 14rpx;
				writing-mode: vertical-rl;
			}

			.line {
				width: 0;
				height: 300rpx;
				opacity: 1;

				border: 2rpx solid rgba(255, 255, 255, 1);
			}
		}

		.city {
			right: 26rpx * 2;
			bottom: 7rpx * 2;
			width: 322rpx;
			height: 328rpx;
		}

		.search {
			padding: 0 26rpx;

			.input {
				margin-left: 32rpx;
				width: 444rpx;
				height: 60rpx;
				opacity: 1;
				border-radius: 200rpx;
				background: rgba(255, 255, 255, 0.5);
				text-align: center;


				:deep(.input-placeholder),
				:deep(.u-input__content__field-wrapper__field) {
					font-size: 24rpx;
					font-weight: 400;
					line-height: 34.76rpx;
					color: rgba(255, 255, 255, 1) !important;
				}

				.keyWrod {
					width: 192rpx + 60rpx;
				}

				.s {
					width: 32rpx;
					height: 32rpx;
					margin-right: 12rpx;
				}
			}

			.weather {
				font-size: 28rpx;
				line-height: 40.54rpx;
				color: rgba(255, 255, 255, 1);

				.t {
					width: 36rpx;
					height: 36rpx;
					margin-left: 10rpx;
				}

				.c {
					width: 24rpx;
					height: 22rpx;
					margin-left: 2rpx;
				}
			}
		}

		&-bg {
			top: 0;
			left: 0;
			width: inherit;
			height: 572rpx;
		}
	}
</style>